<!-- 缺陷列表组件 -->
<template>
	<div>
		<el-dialog title="缺陷保存" :visible.sync="dialogVisible" width="70%" @close="SaveForm={}">
			<el-form v-model="SaveForm" label-width="80px" label-position="right">
				<el-form-item label="项目">

					<el-select v-model="SaveForm.projectId" placeholder="请选择" clearable>
						<el-option v-for="item in projectDtos" :label="item.projectName" :value="item.projectId">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="缺陷名称">
					<el-input v-model="SaveForm.issueName"></el-input>
				</el-form-item>
				<el-form-item label="缺陷描述">
					<el-input type="textarea" v-model="SaveForm.issueDesc"></el-input>
				</el-form-item>
				<el-form-item label="缺陷要求">
					<el-input v-model="SaveForm.doneCondition"></el-input>
				</el-form-item>
				<el-select v-model="SaveForm.issueType" placeholder="缺陷类型" clearable>
					<el-option v-for="item in typeDtos" :label="item.typeDesc" :value="item.typeCode">
					</el-option>
				</el-select>
				<el-select v-model="SaveForm.issueSeverity" placeholder="缺陷严重程度" clearable>
					<el-option v-for="item in severityDtos" :label="item.severityDesc" :value="item.severityCode">
					</el-option>
				</el-select>
				<el-select v-model="SaveForm.issuePriority" placeholder="缺陷优先级" clearable>
					<el-option v-for="item in priorities" :label="item.priorityDesc" :value="item.priorityCode">
					</el-option>
				</el-select>
				<el-upload class="upload-demo" action="http://www.pawntest.com/attach/upload" :on-remove="handleRemove"
					list-type="picture" :on-success="successUp" :with-credentials="cookie" name="mf" :limit="limit"
					ref="files">
					<el-button size="small" type="primary">点击上传附件</el-button>
					<div slot="tip" class="el-upload__tip">只能上传单个文件</div>
				</el-upload>
				<el-form-item label="预计工时">
					<el-input v-model="SaveForm.planWorkHours" style="width: 60px;"></el-input>
				</el-form-item>
				<el-form-item label="计划开始时间">
					<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="SaveForm.planStartTime" type="datetime"
						placeholder="选择日期时间" align="right">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="计划完成时间">
					<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="SaveForm.planEndTime" type="datetime"
						placeholder="选择日期时间" align="right">
					</el-date-picker>
				</el-form-item>


			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="save">确 定</el-button>
			</span>
		</el-dialog>
		<div>
			<el-form :inline="true" v-model="pageQuery" class="demo-form-inline">
				<el-form-item>
					<el-select v-model="pageQuery.projectId" placeholder="项目" clearable>
						<el-option v-for="item in projectDtos" :label="item.projectName" :value="item.projectId">
						</el-option>
					</el-select>
					<el-select v-model="pageQuery.issueState" placeholder="状态" clearable>
						<el-option v-for="item in stateDtos" :label="item.stateDesc" :value="item.stateCode">
						</el-option>
					</el-select>
					<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="pageQuery.startTime" type="datetime"
						placeholder="选择开始时间" align="right">
					</el-date-picker>
					<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="pageQuery.endTime" type="datetime"
						placeholder="选择结束时间" align="right">
					</el-date-picker>
					<el-form-item>
						<el-input v-model="pageQuery.keyword" placeholder="关键词搜索"></el-input>
					</el-form-item>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="query">查询</el-button>
					<el-button type="primary" @click="dialogVisible=true">新增</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div id="defectList">
			<el-table :data="defects" border style="width: 100%" @selection-change="delSel">
				<el-table-column stripe type="selection" align="center">
				</el-table-column>
				<el-table-column stripe type="index" label="No." align="center">
				</el-table-column>
				<el-table-column stripe prop="projectName" label="项目" align="center">
				</el-table-column>
				<el-table-column stripe prop="issueName" label="缺陷名称" align="center">
				</el-table-column>
				<el-table-column stripe prop="issueType" label="类型" align="center" :formatter="Type">
				</el-table-column>
				<el-table-column stripe prop="issuePriority" label="优先级" align="center" :formatter="Priority">
				</el-table-column>
				<el-table-column stripe prop="issueSeverity" label="严重度" align="center" :formatter="severity">
				</el-table-column>
				<el-table-column stripe prop="issueState" label="状态" align="center" :formatter="State">
				</el-table-column>
				<el-table-column stripe prop="assignee" label="处理人" align="center">
				</el-table-column>
				<el-table-column stripe prop="planEndTime" label="预计完成时间" align="center">
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" :disabled="scope.row.issueState!=1" icon="el-icon-edit"
							@click="update(scope.row)">
						</el-button>
						<el-button size="mini" type="danger" icon="el-icon-delete" @click="delById(scope.row.issueId)"
							:disabled="scope.row.issueState==1">撤回
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination layout="prev, pager, next" @current-change="loadPage" :total="total"
				:page-size="pageQuery.size" :current-page="indexPage">
			</el-pagination>
		</div>

	</div>
</template>
<script>
	export default {
		name: 'defect-list',
		data() {
			return {
				defects: [],
				limit: 1,
				file: "",
				cookie: true,
				attach: {},
				attachs: {
					attachDesc: "",
					attachName: "",
					attachUrl: "",
					fileSize: 0,
					issueId: 0
				},
				issueId: "",
				priorities: [],
				severityDtos: [],
				stateDtos: [],
				typeDtos: [],
				projectDtos: [],
				pageQuery: {
					current: 1,
					size: 5,
					startTime: null,
					endTime: null,
					issueState: 0,
					issueType: null,
					keyword: null,
					projectId: 0,
					queryStatus: 0,
				},
				total: null,
				delIds: [],
				indexPage: 1,
				SaveForm: {
					issueDesc: null,
					issueId: null,
					issueName: null,
					issuePriority: null,
					issueSeverity: null,
					issueState: null,
					issueType: null,
					logDesc: null,
					parentIssueId: null,
					planEndTime: null,
					planStartTime: null,
					planWorkHours: null,
					projectId: null,
					doneCondition: null,
				},
				dialogVisible: false,
			}
		},
		methods: {
			save() {
				this.attachs.attachName = this.attach.attachName,
					this.attachs.attachUrl = this.attach.attachUrl,
					this.attachs.fileSize = this.attach.fileSize,
					console.log(this.SaveForm)
				console.log(this.attachs)
				this.$http.post("/defectInfo/save", this.SaveForm).then(resp => {
					if (resp.data.statusCode == 200) {
						console.log(this.attach)
						this.attachs.issueId = resp.data.data.issueId
						if (this.attachs.attachUrl != null || this.attachs.attachUrl != "") {
							this.$http.post("/attach/save", this.attachs).then(resp => {
								if (resp.data.statusCode == 200) {
									// this.SaveForm={}
									this.$refs.files.clearFiles()
									this.dialogVisible = false
								}
							})
						}

					}
				})
			},
			query() {
				this.loadDefect()
				this.pageQuery = {
					current: 1,
					size: 3,
					startTime: null,
					endTime: null,
					issueState: null,
					issueType: null,
					keyword: null,
					projectId: null,
					queryStatus: 1,
				}
			},
			loadDefect() {
				console.log(this.pageQuery)
				this.$http.post("/defectInfo/pageQuery", this.pageQuery).then(resp => {
					if (resp.data.statusCode == 200) {
						this.defects = resp.data.data.records
						this.total = resp.data.data.total
						var data = resp.data.data
						this.defects = data.pageDto.data
						this.total = data.pageDto.total
						this.priorities = data.priorities
						this.severityDtos = data.severityDtos
						this.stateDtos = data.stateDtos
						this.typeDtos = data.typeDtos
						this.projectDtos = data.projectDtos
						console.log(this.defects)
					}
				})
			},
			delSel(sel) {
				this.delIds = [];
				for (var index in sel) {
					this.delIds.push(sel[index].performId)
				}
				console.log(this.delIds)
			},
			update(row) {
				this.dialogVisible = true
				this.SaveForm = row
				console.log(this.SaveForm)
			},
			delById(issueId) {
				console.log(issueId)
				this.$confirm('是否撤回?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http.post("/defectInfo/rollback/" + issueId).then(resp => {
						if (resp.data.statusCode == 200) {
							this.loadDefect()
						}
					})
				}).catch(() => {
					console.log(this.roleParam)
				});
			
			},
			loadPage(index) {
				this.pageQuery.current = index,
					this.loadDefect();
			},
			severity(row, column, cellValue) {
				var severity = this.severityDtos
				for (var i in severity) {
					if (cellValue == severity[i].severityCode) {
						return severity[i].severityDesc
					}
				}
			},
			Priority(row, column, cellValue) {
				var priorities = this.priorities
				for (var i in priorities) {
					if (cellValue == priorities[i].priorityCode) {
						return priorities[i].priorityDesc
					}
				}
			},
			State(row, column, cellValue) {
				var stateDtos = this.stateDtos
				for (var i in stateDtos) {
					if (cellValue == stateDtos[i].stateCode) {
						return stateDtos[i].stateDesc
					}
				}
			},
			Type(row, column, cellValue) {
				var typeDtos = this.typeDtos
				for (var i in typeDtos) {
					if (cellValue == typeDtos[i].typeCode) {
						return typeDtos[i].typeDesc
					}
				}
			},
			successUp(resp, file, fileList) {
				// this.fileList = resp.data,
				this.attach = resp.data
				console.log(this.attach)
			},
			handleRemove(file, fileList) {
				console.log(file)
				this.attach = {};
				this.attach.attachUrl = file.response.data.attachUrl
				this.$http.post("/attach/remove", this.attach).then(resp => {
					if (resp.data.statusCode == 200) {}
				})
			},
		},
		
		created() {
			this.loadDefect()
		},
	}
</script>
<style>

</style>
